<template>
    <div>
        <div class="box" @click="jujiao()">
            <h1>Login</h1>
            <input
                type="text"
                placeholder="Username"
                v-model="myInput.myPhone"
            />
            <input
                type="password"
                placeholder="Password"
                v-model="myInput.myPassword"
            />
            <el-button
                round
                id="submit-btn"
                @click="myUserLogin(myInput)"
                :loading="loginLoading"
                >登录</el-button
            >
        </div>
        <div class="bgBanner">
            <video
                src="../../assets/video/Live_Wallpaper_2.mp4"
                autoplay
                loop
                muted
                id="loginBg"
                @click="shijiao()"
            ></video>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { log } from "util";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("login");
export default {
    data() {
        return {
            myInput: {
                myPhone: "",
                myPassword: "",
            },
            loginLoading: false,
        };
    },
    computed: {},
    methods: {
        ...mapActions(["userLogin"]),
        async myUserLogin(val) {
            this.loginLoading = true;
            try {
                const res = await this.userLogin(val);
                console.log(res);
                if (res.code === 200) {
                    window.localStorage.setItem("cookie", res.cookie);
                    window.localStorage.setItem("token", res.token);
                    window.localStorage.setItem("loginStatu", true);
                    window.localStorage.setItem("userId", res.account.id);
                    this.$message({
                        message: "登录成功",
                        type: "success",
                    });
                    setTimeout(() => {
                        this.loginLoading = false;
                        this.$router.push({ path: "/home/index" });
                    }, 1500);
                } else {
                    this.$message.error(res.msg);
                }
            } catch (error) {
                this.$message.error(res.msg);
            }
        },
        jujiao() {
            let video = document.getElementById("loginBg");
            console.log(video);
            video.style = "filter:blur(8px);transform: scale(1.1);";
            // video.style.height = "105%";
        },
        shijiao() {
            let video = document.getElementById("loginBg");
            video.style = "filter:blur(0px)transform: scale(1.0); ";
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/login.scss";
</style>